<!DOCTYPE html>  
<html>  
  <head>  
    <title>Custom Tooltips</title>  
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">  
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->  
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>  
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>  
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <style>  
      .tooltip-inner {  
        white-space: nowrap;  
      }  
    </style>  
  </head>  
  <body>  
    <div id="map" class="map"></div>  
    <script>  
      var map = new ol.Map({  
        layers: [  
          new ol.layer.Tile({  
            source: new ol.source.OSM()  
          })  
        ],  
        target: 'map',  
        view: new ol.View({  
          center: [-8730000, 5930000],  
          rotation: Math.PI / 5,  
          zoom: 8  
        })  
      });  
  
      //设置提示位置  
      $('.ol-zoom-in, .ol-zoom-out').tooltip({  
        placement: 'right'  
      });  
      $('.ol-rotate-reset, .ol-attribution button[title]').tooltip({  
        placement: 'left'  
      });  
    </script>  
  </body>  
</html>  